<template>
  <div class="reg" style="height:100%;padding:0.8rem;display:flex;display:-webkit-flex;flex-direction:column;-webkit-flex-direction:column;justify-content:space-between;-webkit-justify-content:space-between;">
    <div class="reg_top">
      <img class="reg_close" src="@/common/icon/user/close.jpg" @click="$router.back()" alt="">
      <div class="reg_title f52 col_33">注册</div>
      <div class="reg_list_box">
        <div class="reg_list">
          <input class="list_write_input f32" v-model="userTel" type="text" placeholder="请输入手机号" maxlength="11">
        </div>
        <div class="reg_list reg_list_ma">
          <input class="list_ma_input f32" v-model="userTelMa" type="text" placeholder="请输入手机验证码">
          <button class="ma_btn f32 col_33" @click="getMa">{{getMaWords}}</button>
        </div>
        <div class="reg_list">
          <input class="list_write_input f32" v-model="userPass" type="password" placeholder="请设置6-12位数密码">
        </div>
        <div class="reg_list">
          <input class="list_write_input f32" v-model="userSurePass" type="password" placeholder="请确认密码">
        </div>
        <div class="reg_list">
          <input class="list_write_input f32" v-model="yaoTel" type="text" placeholder="请输入邀请人手机号(选填)" maxlength="11">
        </div>
      </div>
      <div class="global_btn reg_btn" @click="regBtn">注册</div>
    </div>
    <div class="f24 reg_tishi" style="">苹果用户使用前需要去设置里信任一下本产品哦!</div>
  </div>
</template>
<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      getMaWords: '获取验证码',
      codeTime: 60, // 倒计时时间
      timer: 0, // 定时器
      state:false, // 控制是否是连击
      userTel: '', // 手机号
      userTelMa:　'', // 输入的验证码
      userGetMa: '', // 接收到的验证码
      userPass: '', // 密码
      userSurePass: '', // 确认密码
      yaoTel: '' // 邀请人手机号
    }
  },
  watch: {
    codeTime(){
      if(this.codeTime === 0) {
        this.getMaWords = '重新发送';
      }
    }
  },
  beforeDestory () {
    this.clearCodeTime();
  },
  mounted() {},
  methods: {
    // 发送验证码
    getMa(){
      let $this = this;
      if ($this.userTel.length != 11) {
        $this.$toast({
          message: '请填写正确的手机号',
          duration: 800
        })
       return;
      }else{
        if($this.state){
          return false;
        }
        $this.state = true;
        if ($this.codeTime !== 60)  return;
        $this.timer = setInterval(() => {
          if (--$this.codeTime === -1) {
            $this.clearCodeTime();
          }
          if($this.codeTime!==60){
            $this.getMaWords = $this.codeTime + 's后重新发送';
          }
        }, 1000);
        $this.$axios.post('index.php?m=index&c=get_code', { phone:$this.userTel }).then( res=>{
          $this.userGetMa=res.data.smscode;
        })
      }
    },
    // 清除验证码获取
    clearCodeTime () {
      this.codeTime = 60;
      clearInterval(this.timer);
      this.state = false;
    },
    regBtn(){
      var $this = this;
      if($this.getMaWords == '重新发送'){
        $this.$toast({
          message: '请重新发送验证码',
          duration: 800
        })
      } else {
        // 验证手机号
        if (!/^1([38]\d|5[0-35-9]|7[3678])\d{8}$/.test($this.userTel)) {
          $this.$toast({
            message: '请填写正确的手机号',
            duration: 800
          })
          return;
        }else if(!$this.userTelMa){
          $this.$toast({
            message: '请填写验证码',
            duration: 800
          })
          return;
        }else if($this.userTelMa != $this.userGetMa){
          $this.$toast({
            message: '验证码输入不正确',
            duration: 800
          })
          return;
        }else if (!/^[\w]{6,12}$/.test($this.userPass)){
          this.$toast({
            message: '请输入6到12位密码',
            duration: 800
          })
          return;
        }else if ($this.userPass != $this.userSurePass){
          $this.$toast({
            message: '两次密码输入不一致',
            duration: 800
          })
          return;
        }
        var data = {phone: $this.userTel,yzcode:$this.userTelMa,pass1:$this.userPass,pass2:$this.userSurePass,t_phone:$this.yaoTel};
          $this.$axios.post('index.php?m=index&c=register',data)
            .then((res) => {
              if(res.data.code == 1){
                $this.$toast({
                  message: res.data.msg,
                  duration: 800,
                  onClose:()=>{
                    $this.$router.push("/login");
                  }
                })
              }else{
                $this.$toast({
                  message: res.data.msg,
                  duration: 800
                })
              }
            })
          }

    }
  },
}
</script>
<style lang="less">
  .reg{
    .reg_tishi{
      color:#999; text-align:center;
    }
    .reg_close{
      position: absolute;
      right: 0.8rem;
      top: 0.8rem;
      height: 0.5333rem;
    }
    .reg_title{ margin-top: 0.4888rem; }
    .reg_list_box{
      margin-top: 1.2rem;
      .reg_list{
        height: 1.3333rem;
        border-bottom: 1Px solid rgba(0, 0, 0, 0.05);
        margin-bottom: 0.4rem;
        .list_write_input{
          height: 100%;
          width: 100%;
        }
      }
      .reg_list_ma{
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        .list_ma_input{ flex: 1; -webkit-flex: 1; }
        .ma_btn{
          background: #fff;
          text-align: left;
          flex: 0 0 auto;
          -webkit-flex: 0 0 auto;
        }
      }
    }
    .reg_btn{ margin-top: 0.9333rem;}
  }

</style>
